<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="/static/jquery-3.6.0.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="head"></div>
<div style="margin-top: 62px">
    <div>
        <video loop width="100%" height="162px" AUTOPLAY MUTED
               style="object-fit: cover; transform: scale(1) translate(0px, 0px) rotate(0deg);"
               src="/static/video/0ace330c-5e7d-4539-9ae7-efe5c24c17c2.webm">
        </video>
    </div>
</div>
<div style="display: flex; margin: 30px">
    <div class="b-example-divider"></div>
    <!--左侧导航栏-->
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px; ">
        <a href="/user/userInfo"
           class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">个人中心</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="/user/userInfo" class="nav-link link-dark">
                    <i class="bi me-2 bi-house-door"></i>
                    首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页
                </a>
            </li>
            <li>
                <a href="/user/userInfoUpdate" class="nav-link active" aria-current="page">
                    <i class="bi me-2 bi-info-circle"></i>
                    我的信息
                </a>
            </li>
            <li>
                <a href="/user/money" class="nav-link link-dark">
                    <i class="bi me-2 bi-coin"></i>
                    我的钱包
                </a>
            </li>
            <li>
                <a href="/user/liveStream" class="nav-link link-dark">
                    <i class="bi me-2 bi-camera-reels"></i>
                    直播中心
                </a>
            </li>
            <li>
                <a href="/user/personalSpace" class="nav-link link-dark">
                    <i class="bi me-2 bi-person-workspace"></i>
                    个人空间
                </a>
            </li>
        </ul>
    </div>
    <!--内容-->
    <div style="margin-left: 30px">
        <div><h3>我的信息</h3></div>
        <hr>
        <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-avatar">头像：</span>
            <img id="avatar" width="60" height="60" class="rounded-circle" style="margin: 0 30px">
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-username">昵称：</span>
            <input type="text" name="username" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-username">
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-sex">性别：</span>
            <input type="radio" name="sex" value="男" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sex">男
            <input type="radio" name="sex" value="女" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sex">女
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-email">邮箱：</span>
            <input type="email" name="email" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-email">
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-phone">手机号：</span>
            <input type="text" name="phone" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-phone">
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("#head").load("head");
        let resData = JSON.parse([[${resData}]]);
        setUserInfo(resData.resObj);
    });
    function setUserInfo(userInfo){
        $(".input-group #avatar").attr("src", userInfo.avatar);
        $(".input-group [name=username]").val(userInfo.username);
        if (userInfo.sex == "女"){
            $(".input-group [name=sex]:last").prop("checked", true);
        } else {
            $(".input-group [name=sex]:first").prop("checked", true);
        }
        $(".input-group [name=email]").val(userInfo.email);
        $(".input-group [name=phone]").val(userInfo.phone);
    }
</script>
</html>